<template>
	<view class="dynamicbox">
		<custom-tarbar class="customtarbar" :class="scrollTop >= cbTop ? 'newcomtarbar' : ''">
			<template #left>
				<!-- <view class="back" ><image src="../../static/images/dynamic/back-white.png" mode="widthFix"></image></view> -->
				<view class="back_white" @tap="goFind" v-show="scrollTop < cbTop"><image src="../../static/images/dynamic/back-white.png" mode="widthFix"></image></view>
				<view class="back" @tap="goFind" v-show="scrollTop >= cbTop"><image src="../../static/images/dynamic/back-black.png" mode="widthFix"></image></view>
			</template>
			<template #center>
				<view class="title" v-if="scrollTop >= cbTop"><view>朋友圈</view></view>
			</template>
			<template #right>
				<view @tap="goEdit" class="info" v-if="scrollTop >= cbTop"><image src="../../static/images/dynamic/camera-black.png" mode="widthFix"></image></view>
				<view @tap="goEdit" class="info" v-else><image src="../../static/images/dynamic/camera-white.png" mode="widthFix"></image></view>
			</template>
		</custom-tarbar>
		<scroll-view scroll-y="true" @scroll="onScroll" @scrolltolower="toLower" :scroll-top="scrollTop">
			<view class="dynamic">
				<view class="content">
					<view class="c_top">
						<view class="bg"><image :src="getUser.avatars" mode="aspectFill"></image></view>
						<!-- <view class="bg"><image src="../../static/images/img/one.png" mode="aspectFill"></image></view> -->
						<view class="mask"></view>
						<view class="messNotify"  @tap="goMessNofify">
							<view class="v_imgbox">
								<image src="../../static/images/dynamic/liuyan.png" mode="widthFix"></image>
								<view class="v_tip" v-if="getMessCount>0">+{{getMessCount}}</view>
							</view>
							<view class="text">
								<view>留言</view>
							</view>
						</view>
						<view class="visitor">
							<view class="v_imgbox" @tap="goVisitor">
								<image src="../../static/images/dynamic/visitor.png" mode="widthFix"></image>
								<view class="v_tip" v-if="getNewVisitor>0">+{{getNewVisitor}}</view>
							</view>
							<view class="text">
								<view>访问量</view>
								<view>{{getVisiCount}}</view>
							</view>
						</view>
						<view class="imgbox">
							<view class="name">{{ getUser.name }}</view>
							<view class="img" @tap="goIndividual"><image :src="getUser.avatars" mode="aspectFill"></image></view>
							<!-- <view class="name">叶萌</view>
							<view class="img"><image src="../../static/images/img/one.png" mode="aspectFill"></image></view> -->
						</view>
					</view>
					<view class="dy_notify" v-if="getDyNotify.length > 0" @tap="onRefresh">
						<view class="dy_outerbox">
							<view class="dy_image"><image :src="getDyNotify[0].fromImg" mode="aspectFill"></image></view>
							<view class="dy_text">新动态</view>
						</view>
					</view>
					<view class="dy_notify" v-if="getDyNotify.length == 0 && getUnReadNotify > 0">
						<view class="dy_outerbox" @tap="goComNotify">
							<view class="dy_image"><image src="../../static/images/dynamic/about.png" mode="aspectFill"></image></view>
							<view class="dy_text">与我相关</view>
						</view>
					</view>
					<view id="content_box">
						<template v-if="getSocial.length > 0">
							<view class="content_item" v-for="(item, mapIndex) in getSocial" :key="mapIndex">
								<template v-if="item.id">
									<view class="c_middle">
										<view class="c_item">
											<view class="c_item_left">
												<view @tap="goInformation(item.id)"><image lazy-load="true" :src="item.avatars" mode="aspectFill"></image></view>
											</view>
											<view class="c_item_right">
												<view class="c_item_name">{{ item.nickName }}</view>
												<rich-text :nodes="item.log.text"></rich-text>
												<view class="image_box">
													<view
														:class="item.log.imgList.length > 1 ? 'image_outter' : 'image_outer2'"
														v-for="(item2, index) in item.log.imgList"
														:key="index"
													>
														<image @tap="previewImg(item.log.originalList, index)" lazy-load="true" :src="item2" mode="aspectFill"></image>
													</view>
												</view>
											</view>
										</view>
									</view>
									<view class="address" v-if="item.log.address != ''">{{ item.log.address }}</view>
									<view class="c_other">
										<view class="c_other_time">{{ item.log.date | dateFormat }}</view>
										<view class="c_other_zk" :class="mapIndex == index ? 'show' : ''">
											<view class="clbtn">
												<view @tap="giveALike(item.id, item.log.date)"><image src="../../static/images/dynamic/dz.png" mode="widthFix"></image></view>
												<view @tap="openComment(item.id, item.log.date, item.id, item.nickName)">
													<image src="../../static/images/dynamic/pl.png" mode="widthFix"></image>
												</view>
											</view>
											<view class="m_btn" @tap="handler(mapIndex)">
												<view class="m_btn_box"><image src="../../static/images/userhome/more.png" mode="widthFix"></image></view>
											</view>
										</view>
									</view>
									<view class="like_comment" v-if="item.log.like.length > 0 || item.log.comments.length > 0">
										<view class="like_box" v-if="item.log.like.length > 0">
											<view class="aixin">♡</view>
											<view v-for="(item4, index4) in item.log.like" :key="index4 + 'like'">{{ item4.nickName }}</view>
										</view>
										<view class="comment_box" v-if="item.log.comments.length > 0">
											<view
												class="comment_item"
												@tap="openComment(item.id, item.log.date, com.fromUser, com.fromName)"
												v-for="(com, comIndex) in item.log.comments"
												:key="comIndex + 'com'"
											>
												<view class="com_name">{{ com.fromName }}</view>
												<view class="huifu" v-if="com.toUser != item.id">回复</view>
												<view class="toUser" v-if="com.toUser != item.id">{{ com.toName }}</view>
												<view class="com_content">：{{ com.content }}</view>
											</view>
											<view class="c_ohter" v-if="item.comCount>6">
												<view class="c_sl">...</view>
												<view class="c_info" @tap="goSingleDynamic(item.id,item.log.date)">详情>></view>
											</view>
										</view>
									</view>
								</template>
							</view>
						</template>
						<template v-else>
							<view class="empty">暂无动态</view>
						</template>
					</view>
				</view>
			</view>
		</scroll-view>
		<comment v-if="showComment" class="comment" @comment="comment"></comment>
		<topicon
			class="topicon"
			:iconWidth="80"
			:iconHeight="80"
			:startPostion="3"
			iconPath="http://www.yemengs.cn/common/top.png"
			:marginBottom="0"
			:marginTop="60"
			:marginLeft="5"
			:marginRight="5"
			@tapIcon="tapIcon"
			v-if="scrollTop > 500"
		></topicon>
	</view>
</template>

<script>
import CustomTarbar from '../../components/customtarbar/customtarbar.vue';
import { mapGetters } from 'vuex';
import comment from '../../components/comment/comment.vue';
import topicon from '../../components/gwh-backTopIcon/gwh-backTopIcon.vue';
import request from '../../api/request.js';

export default {
	data() {
		return {
			text: 'long time no see , 哈哈啊啊哈哈',
			image_list: [
				//测试时的图片数组
				'../../static/images/img/four.png',
				'../../static/images/img/three.png',
				'../../static/images/img/two.png',
				'../../static/images/img/one.png',
				'../../static/images/img/two.png',
				'../../static/images/img/one.png'
			],
			scrollTop: 0, //滚动距离
			cbTop: 0, //content_box区域距离顶部的距离
			index: -1, //记录当前点击的是那个...按钮
			showComment: false, //控制comment组件显示的标识
			flag: true, //在滚动过程中是否显示comment组件的标识
			flagIndex: 0, //计算scroll-view滚动的次数，与flag搭配使用，解决bug
			social: [], //朋友圈数组
			id: null, //动态的id
			date: null, //动态的时间
			toUser: null, //评论时回复谁 id
			toName: null, //评论时回复谁 name
			page: 1, //分页：当前页
			limit: 15 //分页：每页的条数
		};
	},
	onLoad() {
		this.acquire();
		this.$store.dispatch("obtainMessNotify")
	},
	watch: {
		social: {
			//深度监听social
			deep: true,
			handler: function(val, oldval) {}
		}
	},
	computed: {
		...mapGetters(['getUser', 'getDyNotify', 'getUnReadNotify',"getVisiCount","getNewVisitor","getMessCount"]),
		getSocial() {
			//结合watch来监听social的改变
			return this.social;
		}
	},
	mounted() {
		this.getScrollTop();
		uni.$on("refresh",()=>{ //发表动态时刷新数据
			this.page = 1
			this.social = []
			this.acquire()
		})
	},
	// 下拉刷新
	async onPullDownRefresh() {
		this.page = 1;
		this.social = [];
		this.acquire();
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1000);
	},
	components: {
		CustomTarbar,
		comment,
		topicon
	},
	methods: {
		// 监听滚动距离
		onScroll(e) {
			this.index = -1;

			// 解决comment组件因为滚动自动消失的bug
			if (this.flag == true) {
				this.flagIndex++;
				if (this.flagIndex >= 4) {
					this.flag = false;
					this.flagIndex = 0;
				}
			} else {
				this.showComment = false;
				this.flag = true;
			}
			this.scrollTop = e.detail.scrollTop;
			// console.log(this.showComment,"我滚动了")
		},
		// 获取content_box区域距离顶部的距离
		getScrollTop() {
			const query = uni.createSelectorQuery().in(this);
			query
				.select('#content_box')
				.boundingClientRect(data => {
					this.cbTop = data.top - 40;
				})
				.exec();
		},
		// 点击...按钮触发的事件
		handler(index) {
			// console.log(index,this.index)
			if (this.index == index) {
				this.index = -1;
			} else {
				this.index = index;
			}
		},
		// 点赞触发的事件
		async giveALike(id, date) {
			this.index = -1;
			// 本地添加数据
			this.social.map(item => {
				if (item.id == id && new Date(item.log.date).getTime() == new Date(date).getTime()) {
					// 判断点赞数组中是否存在该用户
					let index = item.log.like.findIndex(item => {
						//通过或来判断，因为存到数据库是存的id,本地存的是name
						return item.id == this.getUser._id;
					});
					if (index == -1) {
						//如果不存在则添加
						item.log.like.unshift({ id: this.getUser._id, nickName: this.getUser.name });
					} else {
						//存在则删除
						item.log.like.splice(index, 1);
					}
				}
				return item;
			});
			// 向服务器发送数据
			let res = await request({
				url: '/dynamic/like',
				data: {
					token: uni.getStorageSync('token'),
					id,
					date
				},
				method: 'POST'
			});
		},
		// 评论
		async comment(content) {
			this.showComment = false;
			// 本地添加数据
			this.social.map(item => {
				if (item.id == this.id && new Date(item.log.date).getTime() == new Date(this.date).getTime()) {
					item.log.comments.unshift({
						fromUser: this.getUser._id,
						fromName: this.getUser.name,
						toUser: this.toUser,
						toName: this.toName,
						content
					});
				}
				return item;
			});

			// 向服务器发送数据
			let res = await request({
				url: '/dynamic/comment',
				data: {
					token: uni.getStorageSync('token'),
					id: this.id,
					date: this.date,
					toUser: this.toUser,
					toName: this.toName,
					content
				},
				method: 'POST'
			});
			if(res[1].data.status){
				uni.showToast({
					title: "评论成功",
					duration:1000
				});
			}else{
				uni.showToast({
					title: "发表评论失败",
					icon:"none",
					duration:1000
				});
			}
		},
		// 打开评论组件
		openComment(id, date, toUser, toName) {
			this.id = id;
			this.date = date;
			this.toUser = toUser;
			this.toName = toName;
			this.index = -1;
			this.showComment = true;
		},
		// 跳转到个人空间页
		goIndividual() {
			uni.navigateTo({
				url: './individual/individual?id='+this.getUser._id
			});
		},
		// 跳转到编辑页
		goEdit() {
			uni.navigateTo({
				url: './edit/edit?path=dynamic'
			});
		},
		// 回到发现页
		goFind() {
			uni.switchTab({
				url: '../find/find'
			});
		},
		// 获取朋友圈数据
		async acquire() {
			let res = await request({
				url: '/social/acquire',
				data: {
					token: uni.getStorageSync('token'),
					limit: this.limit,
					page: this.page
				}
			});
			if (res[1].data.length > 0) {
				this.social.push(...res[1].data);
			}
		},
		// 预览图片
		previewImg(imglist, index) {
			console.log(imglist,index)
			uni.previewImage({
				urls: imglist,
				current: index,
				longPressActions: {
					itemList: ['发送给朋友', '保存图片', '收藏'],
					success: function(data) {
						// console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
					},
					fail: function(err) {
						// console.log(err.errMsg);
					}
				}
			});
		},
		// 加载更多
		toLower() {
			this.page++;
			this.acquire();
		},
		// 去评论通知页面
		goComNotify() {
			this.acquire()
			uni.navigateTo({
				url: './comnotify/comnotify'
			});
		},
		// 返回顶部
		tapIcon(e) {
			this.scrollTop = 0;
		},
		// 去好友详情页面
		goInformation(id){
			if(this.getUser._id!=id){
				uni.navigateTo({
					url:"../information/information?id="+id
				})
			}
		},
		// 去留言通知页面
		goMessNofify(){
			uni.navigateTo({
				url:"./messnotify/messnotify"
			})
		},
		// 去个人中心访客模块
		goVisitor(){
			uni.navigateTo({
				url: './individual/individual?id='+this.getUser._id +"&tabindex=2"
			});
		},
		//动态详情
		goSingleDynamic(id,date){
			uni.navigateTo({
				url: "./sigledynamic/sigledynamic?id="+id+"&&date="+date
			});
		},
		async onRefresh(){
			uni.startPullDownRefresh()
			let res = await request({
				url: '/dynamic/notify/remove',
				data: {
					token: uni.getStorageSync('token')
				},
				method: 'POST'
			});
			this.$store.dispatch('getDyNotify');
		}
	}
};
</script>

<style lang="scss" scoped>
@import '../../commons/css/mycss.scss';
.dynamicbox {
	height: calc(100vh - 60rpx);
	margin-top: var(--status-bar-height);
	scroll-view {
		height: 100%;
	}
}
.box-top {
}
.customtarbar {
	position: fixed;
	top: var(--status-bar-height);
	right: 0;
	left: 0;
	height: 88rpx;
	z-index: 9999;
	.back_white {
		height: 88rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		image {
			width: 46rpx;
			height: 100%;
		}
	}
	.back {
		height: 88rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		image {
			width: 46rpx;
			height: 100%;
		}
	}
	.title {
		line-height: 88rpx;
		padding: 0rpx 20rpx;
		view {
			display: inline-block;
		}
	}
	.info {
		width: 100%;
		height: 88rpx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		padding-right: 20rpx;
		image {
			width: 60rpx;
			height: auto;
		}
	}
}
.comtarbar {
	.info {
		margin-left: 30rpx;
	}
}
// .comment{

// }
.dynamic {
	// padding-top: var(--status-bar-height);
	// box-sizing: border-box;
	.content {
		padding-bottom: 40rpx;
		position: relative;
	}
	.c_top {
		width: 100vw;
		height: 40vh;
		position: relative;
		.bg {
			position: absolute;
			width: 100vw;
			height: calc(100% + 88rpx);
			left: 0;
			bottom: 0;
			overflow: hidden;
			z-index: 1;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.mask {
			position: absolute;
			height: calc(100% + 88rpx);
			left: 0;
			bottom: 0;
			background: rgba(0, 0, 0, 0.5);
			z-index: 2;
		}
		.messNotify{
			position: absolute;
			bottom: 90rpx;
			left: 30rpx;
			z-index: 4;
			display: flex;
			.v_imgbox{
				width: 60rpx;
				height: 60rpx;
				background: rgba(255,255,255,.7);
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
				position: relative;
				image{
					width: 70%;
					height: 70%;
				}
				.v_tip{
					position: absolute;
					top: -26rpx;
					left:40rpx;
					height:36rpx;
					padding: 0 6rpx;
					background: #cc295a;
					color: white;
					font-size: 10rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 10rpx;
				}
			}
			.text{
				padding-left: 40rpx;
				display: flex;
				font-size: 28rpx;
				color: white;
				height: 60rpx;
				line-height: 60rpx;
				opacity: .8;
				view{
					padding-right: 20rpx;
				}
			}
		}
		.visitor{
			position: absolute;
			bottom: 10rpx;
			left: 30rpx;
			z-index: 4;
			display: flex;
			.v_imgbox{
				width: 60rpx;
				height: 60rpx;
				background: rgba(255,255,255,.7);
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
				position: relative;
				image{
					padding-top: 4rpx;
					width: 70%;
					height: 70%;
				}
				.v_tip{
					position: absolute;
					top: -20rpx;
					left:40rpx;
					height:36rpx;
					padding: 0 6rpx;
					background: #cc295a;
					color: white;
					font-size: 10rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 10rpx;
				}
			}
			.text{
				padding-left: 40rpx;
				display: flex;
				font-size: 28rpx;
				color: white;
				height: 60rpx;
				line-height: 60rpx;
				opacity: .8;
				view{
					padding-right: 20rpx;
				}
			}
		}
		.imgbox {
			height: 120rpx;
			// width: 300rpx;
			position: absolute;
			right: 50rpx;
			bottom: -18rpx;
			display: flex;
			justify-content: flex-end;
			z-index: 100;
			.name {
				height: 120rpx;
				line-height: 120rpx;
				color: white;
				padding-right: 10rpx;
			}
			.img {
				width: 120rpx;
				height: 120rpx;
				border-radius: 10rpx;
				overflow: hidden;
				border: 2rpx solid #ffffff;
				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
	.dy_notify {
		margin-top: 40rpx;
		width: 100vw;
		display: flex;
		justify-content: center;
		align-items: center;
		.dy_outerbox {
			display: flex;
			background: #aaaa7f;
			padding: 8rpx 20rpx;
			border-radius: 10rpx;
			.dy_image {
				height: 60rpx;
				width: 60rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				vertical-align: middle;
				image {
					width: 90%;
					height: 90%;
					vertical-align: middle;
					border-radius: 10rpx;
				}
			}
			.dy_text {
				margin-left: 10rpx;
				font-size: 32rpx;
				height: 60rpx;
				line-height: 60rpx;
				color: white;
			}
		}
	}
	.c_middle {
		padding-top: 60rpx;
		.c_item {
			padding: 0rpx 20rpx;
			display: flex;
			.c_item_left {
				width: 130rpx;
				view {
					margin-left: 10rpx;
					width: 90rpx;
					height: 90rpx;
					border-radius: 10rpx;
					overflow: hidden;
					image {
						width: 100%;
						height: 100%;
					}
				}
			}
			.c_item_right {
				width: calc(100% - 120rpx);
				.c_item_name {
					font-size: 36rpx;
					color: #2054a8;
				}
				.text {
					font-size: 34rpx;
				}
				.image_box {
					display: flex;
					flex-wrap: wrap;
					margin-top: 16rpx;
					.image_outter {
						width: 190rpx;
						height: 190rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						margin-bottom: 2rpx;
						overflow: hidden;
						image {
							width: 186rpx;
							height: 186rpx;
						}
					}
					.image_outer2 {
						width: 60%;
						display: flex;
						justify-content: center;
						align-items: center;
						image {
							width: 98%;
						}
					}
				}
			}
		}
	}
	.address {
		padding: 20rpx 40rpx 0rpx 150rpx;
		font-size: 28rpx;
		color: #528ed8;
	}
	.c_other {
		box-sizing: border-box;
		width: 100%;
		padding: 20rpx 40rpx 20rpx 150rpx;
		position: relative;
		// background: green;
		.c_other_time {
			font-size: 28rpx;
			color: #ccc;
		}
		.c_other_zk {
			height: 100%;
			text-align: right;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			// background: red;
			position: absolute;
			right: 40rpx;
			top: 0rpx;
			width: 60rpx;
			overflow: hidden;
			.clbtn {
				background: #7a7a7a;
				display: flex;
				padding: 6rpx 10rpx;
				border-radius: 10rpx;
				margin-right: 20rpx;
				view {
					height: 50rpx;
					width: 70rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					image {
						width: 40rpx;
						height: 40rpx;
					}
				}
			}
			.m_btn {
				width: 60rpx;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				.m_btn_box {
					height: 34rpx;
					width: 60rpx;
					background: #e7e7e7;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 8rpx;
					image {
						width: 40rpx;
						height: 40rpx;
					}
				}
			}
		}
		.show {
			width: 300rpx !important;
		}
	}
	.like_comment {
		margin: 0rpx 40rpx 0rpx 150rpx;
		padding: 4rpx;
		padding-bottom: 10rpx;
		border-radius: 10rpx;
		background: #e5e5e5;
		.like_box {
			display: flex;
			font-size: 30rpx;
			color: #1668ab;
			flex-wrap: wrap;
			view {
				height: 50rpx;
				line-height: 50rpx;
				padding-left: 10rpx;
			}
			.aixin {
				font-size: 40rpx;
			}
		}
	}
	.comment_box {
		margin-top: 4rpx;
		.comment_item {
			font-size: 30rpx;
			padding: 10rpx;
			display: flex;
			.com_name {
				color: #1668ab;
				flex: auto;
			}
			.huifu {
				padding: 0rpx 10rpx;
				flex: auto;
				color: #bebebe;
				font-size: 28rpx;
			}
			.toUser {
				color: #1668ab;
				flex: auto;
			}
			.com_content {
				flex: 60;
				word-wrap: break-word;
				word-break: normal;
			}
		}
		.c_ohter{
			display: flex;
			font-size: 30rpx;
			justify-content: space-between;
			padding: 10rpx 10rpx;
			padding-left: 20rpx;
			.c_sl{
				vertical-align: top;
				line-height: 30rpx;
				height: 30rpx;
			}
			.c_info{
				color: #1668ab;
			}
		}
	}
}
.newcomtarbar {
	background: white !important;
	// border-bottom: 2rpx solid #000000;
}
.empty{
	height: 40vh;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #ccc;
	font-size: 32rpx;
}
/deep/ rich-text {
	div {
		padding: 10rpx 0rpx;
		font-size: 32rpx;
		word-wrap: break-word;
		word-break: normal;
		color: #555555;
	}
}
</style>
